<template>
  <div class="content" v-if="current">
    <div class="title">{{ getQualifiedName(current) }}</div>
    <div class="tags">
      <div class="from">来源: {{ (current.from || 'jar').toUpperCase() }}</div>
      <div class="tag" v-if="current.tag">被其他类: {{ current.tag.toUpperCase() }}</div>
    </div>
    <div class="risk" :class="{ red: current.riskLevel && current.riskLevel >= 2 }">
      <span>{{ getRisk(current) }}</span>{{ current.desc }}
    </div>
    <el-table v-if="current.methods" :data="current.methods">
      <el-table-column sortable prop="method" label="被调用的方法"></el-table-column>
      <el-table-column sortable :sort-method="sort" width="100" label="被覆写" :formatter="formatter"></el-table-column>
      <el-table-column sortable :sort-method="riskSort" width="100" label="风险等级" :formatter="getRisk"></el-table-column>
      <el-table-column width="250" label="风险说明" :formatter="getDesc"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ClassDetail",
  props: {
    current: Object
  },
  methods: {
    formatter(row) {
      return row.tag ? '是' : '否'
    },
    sort(a, b) {
      const sa = this.formatter(a)
      const sb = this.formatter(b)
      if (sa < sb) return 1
      if (sa > sb) return -1
      return 0
    },
    riskSort(a, b) {
      const sa = a.riskLevel
      const sb = b.riskLevel
      if (a.riskLevel === undefined) return 1
      if (b.riskLevel === undefined) return -1
      if (sa < sb) return 1
      if (sa > sb) return -1
      return 0
    },
    getRisk(row) {
      return this.getRiskLevel(row)
    },
    getDesc(row) {
      return row.desc || '无'
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  flex 1
  height 100%
  padding 40px 80px
  box-sizing border-box
  overflow-y auto

  .title
    width 100%
    word-break break-all
    font-size 32px
    color #000
    font-weight 500

  .tags
    display flex
    font-size 14px

    color #666
    margin 20px 0

    div
      margin-right 20px

  .risk
    padding 20px
    margin 20px 0
    background #eee
    border-radius 3px
    color #999

    font-size 14px
    line-height 18px

    span
      color #333
      font-weight 500
      margin-right 10px

  .red
    background #e25656
    color white

    span
      color white
</style>